<template>
   <!-- @touchmove="_tmove"
 @mousemove="_tmove" -->
  <canvas ref="canvas" @touchstart="_tstart" @touchmove="_tmove" @touchend="_tend"
          @mousedown="_tstart" @mouseup="_tend"></canvas>
</template>

<script>
let canvas, ctx
let curInput = false
function BezierEllipse1 (context, x, y, a, b) {
  let ox = 0.5 * a,
  oy = 0.6 * b;
  context.save();
  context.translate(x, y);
  context.beginPath();
  //从椭圆纵轴下端开始逆时针方向绘制
  context.moveTo(0, b);
  context.bezierCurveTo(ox, b, a, oy, a, 0);
  context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
  context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
  context.bezierCurveTo(-a, oy, -ox, b, 0, b);
  context.closePath();
  context.stroke();
  context.restore();
}
function drawArrow(context, x, y, _x, _y, theta, headlen) {
    theta = typeof(theta) != 'undefined' ? theta : 30;
    headlen = typeof(headlen) != 'undefined' ? headlen : 25;
 
    // 计算各角度和对应的P2,P3坐标
    let angle = Math.atan2(y - _y, x - _x) * 180 / Math.PI,
        angle1 = (angle + theta) * Math.PI / 180,
        angle2 = (angle - theta) * Math.PI / 180,
        topX = headlen * Math.cos(angle1),
        topY = headlen * Math.sin(angle1),
        botX = headlen * Math.cos(angle2),
        botY = headlen * Math.sin(angle2);

    context.beginPath();
    context.moveTo(x, y);
    context.lineTo(_x, _y);
    context.moveTo(_x + topX, _y + topY);
    context.lineTo(_x, _y);
    context.lineTo(_x + botX, _y + botY);
    context.stroke();
}
export default {
  components: {
  },
  props: ['handleBottomBox', 'curPencil'],
  data() {
    return {
      start: {
        x: null,
        y: null
      },
      move: {
        x: null,
        y: null
      },
      moveBack: null,
      listHistory: [],
      curHistory: -1
    }
  },
  computed: {
  },
  created() {},
  mounted() {
    canvas = this.$refs.canvas
    ctx = canvas.getContext('2d')
  },
  methods:{
    setText (text, x, y, w, h) {
      if (!text) { curInput = false; return }
      text = text.split('\n')
      let fontSize = 12
      ctx.save();
      ctx.font = `${fontSize}px "微软雅黑"`; 
      ctx.textBaseline="hanging";
      ctx.fillStyle = this.curPencil.color
      text.forEach((a,b) => {
        ctx.fillText(a, x, parseInt(y) + 2 + (b * (fontSize + 2)))
      })
      ctx.restore();
      setTimeout(() => {
        curInput = false
      }, 300)
      
    },
    drawing (type) {
      if (this.handleBottomBox.isPencil) {
        // 画笔
        ctx.strokeStyle = this.curPencil.color
        ctx.lineWidth = this.curPencil.lineWidth
        switch (this.curPencil.shape) {
          // shape:   0画, 1直线, 2方形, 3圆形 4箭头
          case 0: {
            ctx.save()
            ctx.beginPath()
            ctx.lineJoin = 'round';
            ctx.lineCap = 'round';
            ctx.moveTo(this.start.x, this.start.y);
            ctx.lineTo(this.move.x, this.move.y);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            this.start = {...this.move}
            break;
          }
          case 1: {
            this.prevBack()
            ctx.beginPath()
            ctx.moveTo(this.start.x, this.start.y);
            ctx.lineTo(this.move.x, this.move.y);
            ctx.closePath();
            ctx.stroke();
            break;
          }
          case 2: {
            this.prevBack()
            ctx.beginPath()
            ctx.rect(this.start.x, this.start.y, this.move.x - this.start.x, this.move.y - this.start.y)
            ctx.closePath();
            ctx.stroke();
            break;
          }
          case 3: {
            this.prevBack()
            BezierEllipse1(ctx, this.start.x, this.start.y, this.move.x - this.start.x, this.move.y - this.start.y)
            break;
          }
          case 4: {
            this.prevBack()
            drawArrow(ctx, this.start.x, this.start.y, this.move.x, this.move.y)
            break;
          }
        }
      } else if (this.handleBottomBox.isRubber){
        // 橡皮
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.move.x, this.move.y, 5, 0, Math.PI * 2, false);
        ctx.clip();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.closePath();
        ctx.restore();
      } else if (this.handleBottomBox.isText) {
        // 文本
          if (curInput) { return }
          this.prevBack()
          ctx.save();
          ctx.beginPath()
          ctx.setLineDash([5])
          ctx.lineWidth = 1
          ctx.rect(this.start.x, this.start.y, this.move.x - this.start.x, this.move.y - this.start.y)
          ctx.closePath();
          ctx.stroke();
          ctx.restore();
          if (type == 'end') {
            this.prevBack()
            this.$emit('addTextBox', this.start.x, this.start.y, this.move.x - this.start.x, this.move.y - this.start.y)
            curInput = true
          }
      }
    },
    clearAll () {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      this.listHistory = []
      this.curHistory = -1
    },
    goCvs (n) {
      if (this.listHistory[this.listHistory.length + this.curHistory + n]) {
        this.curHistory = this.curHistory + n
        this.changeHistory()
      } else {
        this.$message.warning('没有了!');
      }
    },
    changeHistory () {
      ctx.putImageData(this.listHistory[this.listHistory.length + this.curHistory], 0, 0)
    },
    addHIstory () {
      this.listHistory.push(ctx.getImageData(0, 0, canvas.width, canvas.height))
    },

    addBack () {
      this.moveBack = ctx.getImageData(0, 0, canvas.width, canvas.height)
    },
    prevBack () {
      ctx.putImageData(this.moveBack, 0, 0)
    },
    _tstart (e) {
      if (e.touches) {
        e.clientX = e.touches[0].clientX
        e.clientY = e.touches[0].clientY
      }
      this.addBack()
      if (!this.listHistory.length) {
        this.addHIstory()
      }
      this.start.x = Math.abs(e.clientX - canvas.offsetLeft)
      this.start.y  = Math.abs(e.clientY - canvas.offsetTop)
      canvas.addEventListener('mousemove', this._tmove)
    },
    _tmove (e) {
      if (e.touches) {
        e.clientX = e.touches[0].clientX
        e.clientY = e.touches[0].clientY
      }
      this.move.x = Math.abs(e.clientX - canvas.offsetLeft)
      this.move.y  = Math.abs(e.clientY - canvas.offsetTop)
      this.drawing()
    },
    _tend (e) {
      if (!this.move.x) { return }
      this.drawing('end')
      canvas.removeEventListener('mousemove', this._tmove)
      if (this.curHistory !== -1) {
        this.listHistory.splice(this.curHistory + 1)
        this.curHistory = -1
      }
      this.addHIstory()
    }
  }
}
</script>
<style scoped lang="less">
</style>